<template>
  <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="项目名称" prop="projectid" >
        <el-select 
          v-model="queryParams.projectid"
          placeholder="请选择项目名称"
          style="width: 160px"
           clearable
          @keyup.enter.native="handleQuery"
        >
             <el-option
                v-for="item in ProjectInfoList"
                :key="item.projectid"
                :label="item.projectname"
                :value="item.projectid">
                </el-option> 
            </el-select>
      </el-form-item>
      <el-form-item label="客户名称" prop="custname">
        <el-input
          v-model="queryParams.custname"
          placeholder="请输入客户名称"
          clearable
          style="width: 160px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="联系电话" prop="mobile">
       <el-input
          v-model="queryParams.mobile"
          placeholder="请输入客户联系电话"
          clearable
          style="width: 160px"
          @keyup.enter.native="handleQuery"
        />
          
      </el-form-item>
       <el-form-item label="客户类型" prop="custstate">
       <el-select
          v-model="queryParams.custstate"
          placeholder="请选择客户类型"
          style="width: 160px"
          clearable
          @keyup.enter.native="handleQuery"
        >
           <el-option
                v-for="item in CustStateList"
                :key="item.custstatename"
                :label="item.custstatename"
                :value="item.custstatename"
                >
                </el-option>
       </el-select>
          
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['house_sale:customer:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['house_sale:customer:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['house_sale:customer:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['house_sale:customer:export']"
        >导出</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleload"
          v-hasPermi="['house_sale:customer:download']"
        >导入</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="CustomerInfoList" @selection-change="handleSelectionChange"  
    border
    highlight-current-row
    @current-change="handleCurrentChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="客户编号" align="center" prop="custId" />
      <el-table-column label="客户名称" align="center" prop="custname" />
      <el-table-column label="手机号码"  align="center"  prop="primaryTel"/>
        <el-table-column label="登记时间" align="center" prop="signdate">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.signdate,'{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-management"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['house_sale:customer:edit']"
          >资料</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['house_sale:customer:remove']"
          >删除</el-button>
            <el-button
            size="mini"
            type="text"
            icon="el-icon-s-management"
            @click="CustEvnet(scope.row)"
          >事件</el-button>
            <el-button
            size="mini"
            type="text"
            icon="el-icon-message"
            @click="CustPlan(scope.row)"
          >意向</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit-outline"
            @click="handledajuan(scope.row)"
          >答卷</el-button>
           <el-button
            size="mini"
            type="text"
            icon="el-icon-s-home"
            @click="HouseInfo(scope.row)"
          >房产</el-button>
        </template>
      </el-table-column>
    </el-table>
     
     <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
      
    />
    <!-- 添加或修改事件类型对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-row>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="projectid">
                <el-select v-model="form.projectid" placeholder="请选择项目" >
             <el-option
                v-for="item in ProjectInfoList"
                :key="item.projectid"
                :label="item.projectname"
                :value="item.projectid">
                </el-option> 
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户姓名"  prop="custname">
              <el-input v-model="form.custname" placeholder="请输入客户姓名" style="width:220px"/>
          </el-form-item>
        </el-col>
    </el-row>
     <el-row>
        <el-col :span="12">
          <el-form-item label="拼音代码"  prop="custnamecode">
              <el-input v-model="form.custnamecode" placeholder="请输入客户姓名拼音代码" style="width:220px"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户性质"  prop="custtype">
              <el-select v-model="form.custtype" placeholder="请选择客户性质">
                <el-option
                v-for="item in types"
                :key="item.custtype"
                :label="item.label"
                :value="item.custtype">
                </el-option>
            </el-select>
          </el-form-item>
        </el-col>
    </el-row>
     <el-row>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex" >
            <input type="radio"  value="男" v-model="form.sex"><label>男{{"\xa0\xa0\xa0\xa0\xa0\xa0"}}</label>
            <input type="radio"  value="女" v-model="form.sex"><label>女</label>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主管业务员" prop="chargeperson" label-width="100px" >
             <el-input  v-model="form.chargeperson" placeholder="请选择主管业务员" style="width:170px"/>
             <el-button size="mini" type="primary" icon="el-icon-s-check" @click.native="selectPerson"></el-button>
             <!-- <el-cascader
                v-model="form.chargeperson"
                ref="chargeperson"
                :options="children"
                :show-all-levels="false"
                @change="handleChange"></el-cascader> -->
          </el-form-item> 
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
          <el-form-item label="国籍" prop="country">
             <el-input v-model="form.country" placeholder="请输入国籍" style="width:220px"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="户籍"  prop="nation">
             <el-input v-model="form.nation" placeholder="请选择户籍" style="width:190px"/>
             <el-button size="mini" type="primary" icon="el-icon-s-home" @click.native="toAddress"></el-button>
           
          </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
          <el-form-item label="籍贯" prop="babyaddr">
             <el-input v-model="form.babyaddr" placeholder="请选择籍贯" style="width:190px"/>
             <el-button size="mini" type="primary" icon="el-icon-s-home" @click.native="toAddress2"></el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件名称"  prop="cardname">
               <el-select v-model="form.cardname" placeholder="请选择证件名称"  >
               <el-option
                v-for="item in cardnames"
                :key="item.cardname"
                :label="item.label"
                :value="item.cardname"
               >
                </el-option>
            </el-select>
          </el-form-item>
        </el-col>
    </el-row><el-row>
        <el-col :span="12">
          <el-form-item label="证件号码" prop="cardno">
            <el-input v-model="form.cardno" placeholder="请输入证件号码" style="width:220px"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文化程度"  prop="degree">
              <el-select v-model="form.degree" placeholder="请选择文化程度">
                <el-option
                v-for="item in degrees"
                :key="item.degree"
                :label="item.label"
                :value="item.degree">
                </el-option>
            </el-select>
          </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
          <el-form-item label="客户类型" prop="custstate">
              <el-select v-model="form.custstate" placeholder="请选择" v-bind:disabled="disabled">
              <el-option
                v-for="item in CustStateList"
                :key="item.custstatename"
                :label="item.custstatename"
                :value="item.custstatename"
                >
                </el-option> 
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄阶段"  prop="age">
              <el-select v-model="form.age" placeholder="请选择">
                <el-option
                v-for="item in ages"
                :key="item.age"
                :label="item.label"
                :value="item.age">
                </el-option>
            </el-select>
          </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
          <el-form-item label="客户身份" prop="custVIp">
             <el-select v-model="form.custVIp" placeholder="请选择客户身份">
                <el-option
                v-for="item in vips"
                :key="item.vip"
                :label="item.label"
                :value="item.vip">
                </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期"  prop="birthday">
              <el-input type="date" v-model="form.birthday" placeholder="请选择出生日期" style="width:220px"/>
          </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
          <el-form-item label="登记时间" prop="signdate">
               <el-input type="date" v-model="form.signdate" placeholder="请选择登记时间" style="width:220px"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登记地点"  prop="signaddr">
              <el-input v-model="form.signaddr" placeholder="请输入登记地点" style="width:220px"/>
          </el-form-item>
        </el-col>
    </el-row>
        <el-row>
        <el-col :span="12">
          <el-form-item label="家庭电话" prop="familyTel">
             <el-input v-model="form.familyTel" placeholder="请输入家庭电话" style="width:220px"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话"  prop="primaryTel">
              <el-input v-model="form.primaryTel" placeholder="请输入首要联系电话" style="width:220px"/>
          </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="mobile">
             <el-input v-model="form.mobile" placeholder="请输入联系电话" style="width:220px"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="传真号码"  prop="fax">
              <el-input v-model="form.fax" placeholder="请输入传真号码" style="width:220px"/>
          </el-form-item>
        </el-col>
    </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="办公电话" prop="addr">
             <el-input v-model="form.officeTel" placeholder="请输入办公电话" style="width:220px"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系地址" prop="addr">
             <el-input v-model="form.addr" placeholder="请输入联系地址" style="width:220px"/>
          </el-form-item>
        </el-col>
    </el-row>
        <el-row>
        <el-col :span="12">
          <el-form-item label="邮政编码" prop="postcode">
               <el-input v-model="form.postcode" placeholder="请输入邮政编码" style="width:220px"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电子邮件"  prop="email">
              <el-input v-model="form.email" placeholder="请输入电子邮件号码" style="width:220px"/>
          </el-form-item>
        </el-col>
    </el-row>
   
     <el-row>
        <el-col :span="12">
          <el-form-item label="信息来源" prop="activeid">
              <el-select v-model="form.activeid" placeholder="请选择">
              <el-option
                v-for="item in SaleActiveList"
                :key="item.activeid"
                :label="item.activename"
                :value="item.activename">
                </el-option> 
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成交几率"  prop="salePercent">
               <el-select v-model="form.salePercent" placeholder="请选择成交几率">
                <el-option
                v-for="item in salePercents"
                :key="item.salePercent"
                :label="item.label"
                :value="item.salePercent">
                </el-option>
            </el-select>
          </el-form-item>
        </el-col>
    </el-row>
     <el-row>
        <el-col :span="12">
          <el-form-item label="机会阶段" prop="chance">
              <el-select v-model="form.chance" placeholder="请选择就会阶段">
            <el-option
                v-for="item in chances"
                :key="item.chance"
                :label="item.label"
                :value="item.chance">
                </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="事件类型"  prop="eventtypId">
             <el-select v-model="form.eventtypeid" placeholder="请选择事件类型"  >
            <el-option 
                v-for="type in EventTypeList"
                :key="type.eventtypename"
                :label="type.eventtypename"
                :value="type.eventtypename">
                </el-option>
            </el-select>
          </el-form-item>
        </el-col>
    </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    
     <el-dialog  :visible.sync="house" width="90%" append-to-body>
      <el-table v-loading="loading" :data="CustHouse">
      <el-table-column label="房产名称" align="center" prop="hoursename" />
      <el-table-column label="业态类型" align="center" prop="termtype" />
      <el-table-column label="朝向" align="center" prop="direction" />
      <el-table-column label="户型名称" align="center" prop="modelname" />
      <el-table-column label="使用面积" align="center" prop="salearea" />
      <el-table-column label="房间状态" align="center" prop="salestate" />
      <el-table-column label="销售时间" align="center" prop="saletime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.saletime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
    </el-table>
   </el-dialog>

   <el-dialog  :visible.sync="nation" append-to-body>
           <v-distpicker  @selected='selected'></v-distpicker>
   </el-dialog>
   <el-dialog  :visible.sync="nation2" append-to-body>
           <v-distpicker  @selected='selected2'></v-distpicker>
   </el-dialog>
    <el-dialog :visible.sync="Person" append-to-body width="250px">
        
        <!-- <div>选择主管业务员</div>
        <el-cascader
                v-model="form.chargeperson"
                ref="chargeperson"
                :options="children"
                :show-all-levels="false"
                @change="handleChange"></el-cascader>
          -->
            <!-- <el-tree
            :data="children"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="chargeperson"
            default-expand-all
            @node-click="handleChange"
          /> -->
             <el-tree
            :indent="30"
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            style="text-decoration:underline;color:blue;"
            default-expand-all
            @node-click="handleChange"
          />
          <div v-show="user"  style="width:200px">
                <el-table v-loading="loading" :data="getUserInfo" :row-class-name="tableRowClassName" @current-change="handleUser">
            <el-table-column label="姓名" align="center" prop="nickName" />
            <el-table-column label="岗位" align="center" prop="remark" />
          </el-table>
          </div>
    </el-dialog>
  <!-- <el-dialog
    :title="'上传客户资料'"
    :close-on-click-modal="false"
    :visible.sync="visble"
    width="60%"
  >
    <el-form label-width="100px" style="width:95%;" @keyup.enter.native="dataFormSubmit()">
      <el-row>
        <el-col :span="24">
          <el-form-item label="导入客户资料">
            <el-upload
              class="avatar-uploader"
              :headers="headers"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              name="uploadExcel"
              :before-upload="beforeAvatarUpload">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="模板下载">
            <a href="/admin/excel/personInfo.xls">点击下载Excel模板</a>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <span style="color:red" v-html="errorInfo" />
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()">确 定</el-button>
    </span>
  </el-dialog> -->
  </div>
</template>

<script>
import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer,getUser,getCustHouse} from "@/api/house_sale/customer";
import {listEventType}  from "@/api/house_sale/EventType";
import {listProjectInfo } from "@/api/house_sale/ProjectInfo";
import {listSaleActive}  from "@/api/house_sale/SaleActive";
import {listCustState} from "@/api/house_sale/CustState";
// import {listEvent} from "@/api/house_sale/CustEvent";
import {listUser} from "@/api/system/user";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import vDistpicker  from 'v-distpicker';
import { listCustomerInfo} from "@/api/report/component/componentDeptUserCascader";



export default {
  name: "Customer",
  components: { vDistpicker ,Treeselect},
  data() {
    return {
      //  selected: {
      //   province: '350000',
      //   city: '350100',
      //   area: '350104',
      //   town: '350104008'
      // },
      disabled:false,
      visble:false,
      user:false,
       // 部门树选项
      children:[],
      deptOptions:null,
       defaultProps: {
        children: "children",
        label: "label"
      },

     nation :false,
     nation2:false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 事件类型表格数据
      EventTypeList: [],
      //项目数据
      ProjectInfoList: [],
      //用户类型表格数据
      CustomerInfoList: [],
      //营销活动数据
      SaleActiveList: [],
      //客户类型数据
      CustStateList: [],
       // 客户事件表格数据
      CustEventList: [],
      //客户房产
      CustHouse: [],
      EventList: [],
      options: [],
      deptList: [],
      //业务员
      getUserInfo:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      house: false,
      Person:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectid:null,
        custname:null,
        mobile:null,
        custstate:null,
      },
      //查询参数
      queryParam: {
         
      },
      queryParam2: {
         custid:null,
      },
       types: [{
          custtype: '个人客户',
          label: '个人客户'
        }, {
          custtype: '公司客户',
          label: '公司客户'
        }],
        custtype:'',
        cardnames: [{
            cardname:'身份证',
            label:'身份证',
        },{
            cardname:'护照',
            label:'护照'
        },{
            cardname:'军官照',
            label:'军官照'
        },{
            cardname:'驾驶证',
            label:'驾驶证'
        },{
            cardname:'教师证',
            label:'教师证'
        },{
            cardname:'其他证件',
            label:'其他证件'
        }],
        cardname:'',
        degrees: [{
            degree:'小学',
            label:'小学'
        },{
            degree:'初中',
            label:'初中'
        },{
            degree:'高中',
            label:'高中'
        },{
            degree:'大专',
            label:'大专'
        },{
            degree:'本科',
            label:'本科'
        },{
            degree:'硕士',
            label:'硕士'
        },{
            degree:'博士',
            label:'博士'
        }],
        degree:'',
        ages: [{
            age:'25以下',
            label:'25以下'
        },{
            age:'25-30',
            label:'25-30'
        },{
            age:'30-40',
            label:'30-40'
        },{
            age:'40-50',
            label:'40-50'
        },{
            age:'50-60',
            label:'50-60'
        },{
            age:'60-70',
            label:'60-70'
        },{
            age:'70以上',
            label:'70以上'
        }],
        age:'',
        vips: [{
            vip:'普通客户',
            label:'普通客户'
        },{
            vip:'金卡',
            label:'金卡'
        },{
            vip:'VIP',
            label:'VIP'
        }],
        vip:'',
          salePercents: [{
             salePercent:'0%',
             label:'0%'
        },{
             salePercent:'10%',
             label:'10%'
        },{
             salePercent:'20%',
             label:'20%'
        },{
             salePercent:'30%',
             label:'30%'
        },{
             salePercent:'40%',
             label:'40%'
        },{
             salePercent:'50%',
             label:'50%'
        },{
             salePercent:'60%',
             label:'60%'
        },{
             salePercent:'70%',
             label:'70%'
        },{
             salePercent:'80%',
             label:'80%'
        },{
             salePercent:'90%',
             label:'90%'
        },{
             salePercent:'100%',
             label:'100%'
        }],
        salePercent:'',
        chances: [{
            chance:'比较',
            label:'比较'
        },{
             chance:'兴趣',
             label:'兴趣'
        },{
             chance:'酝酿',
             label:'酝酿'
        }],
        chance:'',
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        custname: [
            { required: true, message: "客户名称不能为空", trigger: "blur" }
        ],
       primaryTel: [
             { required: true, message: "联系电话不能为空", trigger: "blur" },
             {max:11,min: 11,message:"联系电话为11位",trigger:"blur"},
             {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,message: "请输入正确的手机号码",trigger: "blur"}
       ],
       postcode:[
          {max:6,min: 6,message:"邮政编码为6位",trigger:"blur"},
       ],
       email:[
         {pattern:/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/,message: "请输入正确的",trigger: "blur"},
         {type:'string',max:30,message:"长度不要超过30位",trigger:"blur"},
       ],

      }

    };
  },
  created() {
    this.getList();
    this.getList2();
    this.house=false;
    this.getTreeselect();
    
  },
  methods: {

   /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
        // console.log(this.deptOptions);
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.handleQuery();
    },

    // 选中客户数据
    handleCurrentChange(val) {
      this.$emit("custInfo", val);
    },
      handleUser(val) {
       this.form.chargeperson=val.nickName;
       this.user=false;
       this.Person=false;
    },
    /** 查询用户信息列表 */
    getList() {
      this.loading = true;
     listCustomer(this.queryParams).then(response => {
        this.CustomerInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
  
    },
   /**查询事件类型列表 */
   getList2() {
     listEventType(this.queryParam).then(response =>{
         this.EventTypeList=response.rows;
     });
     listProjectInfo(this.queryParam).then(response =>{
         this.ProjectInfoList=response.rows;
     });
    listSaleActive(this.queryParam).then(response =>{
         this.SaleActiveList=response.rows;
     });
    listCustState(this.queryParam).then(response =>{
         this.CustStateList=response.rows;
     });
     listUser(this.queryParam).then(response =>{
         this.UserList=response.rows;
     });
      listCustomerInfo().then( response => {
                this.children = response.data;
            });
   },
    // 取消按钮
    cancel() {
      this.open = false;
      this.disabled=false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        projectid:this.ProjectInfoList[0].projectid,
        custname: null,
        custnamecode:null,
        custtype:this.types[0].custtype,
        sex:"男",
        chargeperson:"",
        nation:null,
        babyaddr:null,
        addr:null,
        cardname:this.cardnames[0].cardname,
        cardno:null,
        degree:this.degrees[0].degree,
        custstate:'来访客户',
        age:this.ages[0].age,
        custVIP:this.vips[0].vip,
        birthday:null,
        signdate:null,
        signaddr:null,
        familyTel:null,
        primaryTel:null,
        officeTel:null,
        mobile:null,
        fax:null,
        postcode:null,
        email:null,
        activeid:this.SaleActiveList[0].activename,
        salePercent:this.salePercents[0].salePercent,
        chance:this.chances[0].chance,
        eventtypeid:this.EventTypeList[0].eventtypename,
        saleperson:null,
      };
      this.resetForm("form");
       this.disabled=false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.custId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.getTreeselect();
      this.open = true;
      this.title = "添加客户";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.getTreeselect();
      // alert(row.custId);
      const custid = row.custId || this.ids
      getCustomer(custid).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "客户资料";
        this.disabled=true;
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.custId != null) {
            updateCustomer(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addCustomer(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            
              addCustEvent().then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const custids = row.custId || this.ids;
      this.$modal.confirm('是否确认删除事件类型编号为"' + custids + '"的数据项？').then(function() {
        return delCustomer(custids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('house_sale/customer/export', {
        ...this.queryParams
      }, `Customer_${new Date().getTime()}.xlsx`)
    },

    /**事件 */

  CustEvnet(row){
   const custid = row.custId ;
   this.$router.push({name:'CustEvent',query:{id:custid} || this.redirect});
  },
  CustPlan(row){
   const custid = row.custId ;
    this.$router.push({name:'CustPlan',query:{id:custid} || this.redirect});
  //  this.$router.push({
  //    path: '/house_sale/CustPlan/custplan/'+custid
  //  });
},

// 点击弹出三级联动
     toAddress(){
        this.nation = true;
 },
   toAddress2(){
        this.nation2 = true;
 },
  // 省市区三级联动
    selected(data){
        this.nation = false;
      
        this.form.nation=data.province.value+data.city.value+data.area.value;
      //  console.log(this.form.nation);  
    },
    selected2(data){
        this.nation2 = false;
      
        this.form.babyaddr=data.province.value+data.city.value+data.area.value;
      //  console.log(this.form.babyaddr);  
    },

HouseInfo(row){
     this.house=true;
     this.queryParam2.custid= row.custId ;
    getCustHouse(this.queryParam2).then(response => {
         this.CustHouse=response.houseList;
      });
    },
    
   //答卷
    handledajuan(row){
      const custid = row.custId;
      const custname = row.custname;
      this.$router.push({
        path:"/house_sale/ResearchExam/examlist/"+custid,
        query: {
         custname:custname,
        }
       })
    },
     handleChange(data){
        //   for(let i=0;i<this.$refs['chargeperson'].getCheckedNodes().length;i++){
        //      if(this.$refs['chargeperson'].getCheckedNodes()[i].level==4){
        //         this.form.chargeperson=this.$refs['chargeperson'].getCheckedNodes()[i].data.label
        //      }
        //   }
         
        const  deptid=data.id;
        getUser(deptid).then(response => {
         this.getUserInfo=response.data;
        //  console.log(this.getUserInfo);
       });
       this.user=true;
         
        // this.form.chargeperson=data.label;
          // this.Person=false;
        },
      selectPerson(){
          this.Person=true;
      },
      handleload(){
        this.visble=true;
      },
       tableRowClassName({row, rowIndex}) {
        if (rowIndex/2 === 0) {
          return 'warning-row';
        } else {
          return 'success-row';
        }
      },
   

  },
};

</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

   .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 160px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
